---
title: परियोजना संरचना
description: Astro के साथ किसी परियोजना की संरचना कैसे करें सीखें।
i18nReady: true
---
import { FileTree } from '@astrojs/starlight/components';

`create astro` CLI विज़ार्ड से उत्पन्न आपके नए Astro परियोजना में पहले से ही कुछ फ़ाइलें और फ़ोल्डर्स शामिल होते हैं। अन्य, आप स्वयं बनाएंगे और Astro की मौजूदा फ़ाइल संरचना में जोड़ें।

यहां बताया गया है कि Astro परियोजना कैसे आयोजित किया जाता है, और कुछ फ़ाइलें जो आपको अपने नए परियोजना में मिलेंगी।

## निर्देशिकाएँ और फ़ाइलें

Astro आपके परियोजना के लिए एक सुविचारित फ़ोल्डर लेआउट का लाभ उठाता है। प्रत्येक Astro परियोजना रूट में निम्नलिखित निर्देशिकाएँ और फ़ाइलें शामिल होनी चाहिए:

- `src/*` - आपका परियोजना स्रोत कोड (अवयव, पृष्ठ, शैलियाँ, आदि।)
- `public/*` - आपका गैर-कोड, असंसाधित संपत्ति (फ़ॉन्ट, आइकॉन, आदि)
- `package.json` - एक परियोजना घोषणापत्र।
- `astro.config.mjs` - एक Astro कॉन्फ़िगरेशन फ़ाइल। (अनुशंसित)
- `tsconfig.json` - एक TypeScript कॉन्फ़िगरेशन फ़ाइल। (अनुशंसित)

### उदाहरण परियोजना वृक्ष

एक सामान्य Astro परियोजना निर्देशिका इस तरह दिख सकती है:

<FileTree>
- public/
  - robots.txt
  - favicon.svg
  - social-image.png
- src/
  - components/
    - Header.astro
    - Button.jsx
  - layouts/
    - PostLayout.astro
  - pages/
    - posts/
      - post1.md
      - post2.md
      - post3.md
    - index.astro
  - styles/
    - global.css
- astro.config.mjs
- package.json
- tsconfig.json
</FileTree>

### `src/`

`src/` फ़ोल्डर वह जगह है जहां आपका अधिकांश परियोजना स्रोत कोड रहता है। इसमें शामिल:

- [पृष्ठ](/hi/basics/astro-pages/)
- [नक़्शे](/hi/basics/layouts/)
- [Astro अवयव](/hi/basics/astro-components/)
- [UI फ्रेमवर्क अवयव (React, etc.)](/hi/guides/framework-components/)
- [शैलियां (CSS, Sass)](/hi/guides/styling/)
- [Markdown](/hi/guides/markdown-content/)

ब्राउज़र पर भेजी जाने वाली अंतिम वेबसाइट बनाने के लिए Astro आपकी `src/` फ़ाइलों को संसाधित, अनुकूलित और बंडल करता है। स्थिर `public/` निर्देशिका के विपरीत, आपकी `src/` फ़ाइलें Astro द्वारा आपके लिए बनाई और प्रबंधित की जाती हैं।

कुछ फ़ाइलें (जैसे Astro अवयव) लिखित रूप में ब्राउज़र पर भी नहीं भेजी जाती हैं, बल्कि उन्हें स्थिर HTML में प्रस्तुत किया जाता है। अन्य फ़ाइलें (जैसे CSS) ब्राउज़र पर भेजी जाती हैं लेकिन प्रदर्शन के लिए उन्हें अन्य CSS फ़ाइलों के साथ अनुकूलित या बंडल किया जा सकता है।

:::tip
हालाँकि यह मार्गदर्शिका Astro समुदाय में उपयोग की जाने वाली कुछ लोकप्रिय परंपराओं का वर्णन करती है, Astro द्वारा आरक्षित एकमात्र निर्देशिकाएँ `src/pages/` और `src/content/` हैं। आप किसी भी अन्य निर्देशिका का नाम बदलने और उसे इस तरह से पुनर्व्यवस्थित करने के लिए स्वतंत्र हैं जो आपके लिए सर्वोत्तम हो।
:::

### `src/components`

**अवयव** आपके HTML पेजों के लिए कोड की पुन: प्रयोज्य इकाइयाँ हैं। ये [Astro अवयव](/hi/basics/astro-components/), या [UI फ्रेमवर्क अवयव](/hi/guides/framework-components/) जैसे React या Vue हो सकते हैं। इस फ़ोल्डर में अपने सभी परियोजना अवयवों को एक साथ समूहित और आयोजित करना आम बात है।

Astro परियोजनाओं में यह एक सामान्य परंपरा है, लेकिन इसकी आवश्यकता नहीं है। बेझिझक अपने अवयवों को अपनी इच्छानुसार आयोजित करें!

### `src/content`

`src/content/` निर्देशिका [सामग्री संग्रह](/hi/guides/content-collections/) और एक वैकल्पिक संग्रह कॉन्फ़िगरेशन फ़ाइल को संग्रहीत करने के लिए आरक्षित है। इस फ़ोल्डर के अंदर किसी अन्य फ़ाइल की अनुमति नहीं है।

### `src/layouts`

[लेआउट](/hi/basics/layouts/) एक Astro अवयव हैं जो एक या अधिक [पेजों](/hi/basics/astro-pages/) द्वारा साझा की गई UI संरचना को परिभाषित करते हैं।

बिल्कुल `src/components` की तरह, यह निर्देशिका एक सामान्य परंपरा है लेकिन आवश्यक नहीं है।

### `src/pages`

[पेजों](/hi/basics/astro-pages/) एक विशेष प्रकार का अवयव है जिसका उपयोग आपकी साइट पर नए पेज बनाने के लिए किया जाता है। एक पृष्ठ एक Astro अवयव या एक Markdown फ़ाइल हो सकता है जो आपकी साइट के लिए सामग्री के कुछ पृष्ठ का प्रतिनिधित्व करता है।

:::caution
`src/pages` आपके Astro परियोजना में एक **आवश्यक** उप-निर्देशिका है। इसके बिना, आपकी साइट पर कोई पेज या रूट नहीं होगा!
:::

### `src/styles`

अपनी CSS या Sass फ़ाइलों को `src/styles` निर्देशिका में संग्रहीत करना एक सामान्य परंपरा है, लेकिन इसकी आवश्यकता नहीं है। जब तक आपकी शैलियाँ `src/` निर्देशिका में कहीं रहती हैं और सही ढंग से आयात की जाती हैं, Astro उन्हें संभालेगा और अनुकूलित करेगा।

### `public/`

`public/` निर्देशिका आपके परियोजना में उन फ़ाइलों और परिसंपत्तियों के लिए है जिन्हें Astro की निर्माण प्रक्रिया के दौरान संसाधित करने की आवश्यकता नहीं है। इस फ़ोल्डर की फ़ाइलें बिना छुए बिल्ड फ़ोल्डर में कॉपी कर दी जाएंगी, और फिर आपकी साइट बन जाएगी।

यह व्यवहार `public/` को छवियों और फ़ॉन्ट जैसी सामान्य संपत्तियों, या `robots.txt` और `manifest.webmanifest` जैसी विशेष फ़ाइलों के लिए आदर्श बनाता है।

आप CSS और JavaScript को अपनी `public/` निर्देशिका में रख सकते हैं, लेकिन ध्यान रखें कि उन फ़ाइलों को आपके अंतिम निर्माण में बंडल या अनुकूलित नहीं किया जाएगा।

:::tip
एक सामान्य नियम के रूप में, कोई भी CSS या JavaScript जिसे आप स्वयं लिखते हैं, उसे आपकी `src/` निर्देशिका में रहना चाहिए।
:::

### `package.json`

यह आपकी निर्भरताओं को प्रबंधित करने के लिए JavaScript पैकेज प्रबंधकों द्वारा उपयोग की जाने वाली फ़ाइल है। यह उन स्क्रिप्ट्स को भी परिभाषित करता है जो आमतौर पर Astro को चलाने के लिए उपयोग की जाती हैं (उदाहरण: `npm start`, `npm run build`)।

`package.json` में आप [दो प्रकार की निर्भरताएँ](https://docs.npmjs.com/specifying-dependencies-and-devdependencies-in-a-package-json-file) निर्दिष्ट कर सकते हैं: `dependencies` और `devDependencies`। ज्यादातर मामलों में, ये समान रूप से काम करते हैं: Astro को निर्माण के समय सभी निर्भरताओं की आवश्यकता होती है, और आपका पैकेज प्रबंधक दोनों को स्थापित करेगा। हम अनुशंसा करते हैं कि शुरू करने के लिए अपनी सभी निर्भरताओं को `dependencies` में रखें, और यदि आपको ऐसा करने की कोई विशिष्ट आवश्यकता लगती है तो केवल `devDependencies` का उपयोग करें।

अपने परियोजना के लिए एक नई `package.json` फ़ाइल बनाने में सहायता के लिए, [मैन्युअल सेटअप](/hi/install-and-setup/#manual-setup) निर्देश देखें।

### `astro.config.mjs`

यह फ़ाइल प्रत्येक स्टार्टर टेम्पलेट में जेनरेट होती है और इसमें आपके Astro परियोजना के लिए कॉन्फ़िगरेशन विकल्प शामिल होते हैं। यहां आप उपयोग के लिए एकीकरण, निर्माण विकल्प, सर्वर विकल्प और बहुत कुछ निर्दिष्ट कर सकते हैं।

Astro अपनी JavaScript कॉन्फ़िगरेशन फ़ाइल के लिए कई फ़ाइल स्वरूपों का समर्थन करता है: `astro.config.js`, `astro.config.mjs`, `astro.config.cjs` और `astro.config.ts`। हम ज़्यादातर मामलों में `.mjs` या अगर आप अपनी कॉन्फ़िगरेशन फ़ाइल में TypeScript लिखना चाहते हैं तो `.ts` का उपयोग करने की सलाह देते हैं।

TypeScript कॉन्फ़िगरेशन फ़ाइल को [`tsm`](https://github.com/lukeed/tsm) का उपयोग करके नियंत्रित किया जाता है और यह आपके परियोजना के `tsconfig` विकल्पों का सम्मान करेगा।

कॉन्फ़िगरेशन सेट करने के विवरण के लिए [कॉन्फ़िगरिंग Astro मार्गदर्शिका](/hi/reference/configuration-reference/) देखें।

### `tsconfig.json`

यह फ़ाइल प्रत्येक स्टार्टर टेम्पलेट में उत्पन्न होती है और इसमें आपके Astro परियोजना के लिए TypeScript कॉन्फ़िगरेशन विकल्प शामिल होते हैं। कुछ सुविधाएँ (जैसे npm पैकेज आयात) `tsconfig.json` फ़ाइल के बिना एडिटर में पूरी तरह से समर्थित नहीं हैं।

कॉन्फ़िगरेशन सेट करने के विवरण के लिए [TypeScript मार्गदर्शिका](/hi/guides/typescript/) देखें।
